<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增设备工艺记录')" />
    <th:block th:include="include :: datetimepicker-css" />
</head>
<body class="gray-bg">
    <div class="main-content">
        <form id="form-add" class="form-horizontal">
            <h4 class="form-header h4">设备工艺基本信息</h4>
            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label is-required">设备编号：</label>
                        <div class="col-sm-8">
                            <input name="equipmentId" class="form-control" type="text" required>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label is-required">工艺名称：</label>
                        <div class="col-sm-8">
                            <input name="processName" class="form-control" type="text" required>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label is-required">记录日期：</label>
                        <div class="col-sm-8">
                            <div class="input-group date">
                                <input name="maintainDate" class="form-control" placeholder="请输入记录日期" type="text" required>
                                <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label is-required">炉数：</label>
                        <div class="col-sm-8">
                            <input name="heatsNumber" class="form-control" type="text" onkeyup="value=value.replace(/[^0-9]/g,'')" required>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label is-required">程序名：</label>
                        <div class="col-sm-8">
                            <input name="programName" class="form-control" type="text" required>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">程序名备注：</label>
                        <div class="col-sm-8">
                            <input name="programRemark" class="form-control" type="text">
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label is-required">累计厚度：</label>
                        <div class="col-sm-8">
                            <input name="accuThickness" class="form-control" type="text" onkeyup="this.value=this.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')" required>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label is-required">挡片累计使用次数：</label>
                        <div class="col-sm-8">
                            <input name="blankUsedTimes" class="form-control" type="text" onkeyup="value=value.replace(/[^0-9]/g,'')" required>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">备注：</label>
                        <div class="col-sm-8">
                            <input name="remark" class="form-control" type="text">
                        </div>
                    </div>
                </div>
            </div>
            <br />
            <br />
            <br />
            <h4 class="form-header h4">激活温度950r20（激活后10+/3），未激活电阻规范15+/-5</h4>
            <div class="row">
                <div class="col-sm-12">
                    <button type="button" class="btn btn-white btn-sm" onclick="addRow1()"><i class="fa fa-plus"> 增加</i></button>
                    <button type="button" class="btn btn-white btn-sm" onclick="sub.delRow()"><i class="fa fa-minus"> 删除</i></button>
                    <div class="col-sm-12 select-table table-striped">
                        <table id="bootstrap-table1"></table>
                    </div>
                </div>
            </div>
            <br />
            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">备注：</label>
                        <div class="col-sm-8">
                            <input name="tempResistanceRemark" class="form-control" type="text">
                        </div>
                    </div>
                </div>
            </div>
            <br />
            <br />
            <br />
            <h4 class="form-header h4">颗粒数</h4>
            <div class="row">
                <div class="col-sm-12">
                    <button type="button" class="btn btn-white btn-sm" onclick="addRow2()"><i class="fa fa-plus"> 增加</i></button>
                    <button type="button" class="btn btn-white btn-sm" onclick="sub.delRow()"><i class="fa fa-minus"> 删除</i></button>
                    <div class="col-sm-12 select-table table-striped">
                        <table id="bootstrap-table2"></table>
                    </div>
                </div>
            </div>
            <br />
            <br />
            <div class="row">
                <div class="col-sm-offset-5 col-sm-10">
                    <button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i>保 存</button>&nbsp;
                    <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>关 闭 </button>
                </div>
            </div>

        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: datetimepicker-js" />
    <script th:inline="javascript">
        var prefix = ctx + "equipment/processrecord";
        $(function() {
            // 初始化数据, 可以由后台传过来
            var data1 = [
                {
                    id: "100",
                    eqpLotLocation: "C1",
                    eqpLot: "",
                    eqpLocActiveUp: "",
                    eqpLocActiveMiddle: "",
                    eqpLocActiveDown: "",
                    eqpLocActiveLeft: "",
                    eqpLocActiveRight: "",
                    eqpLocActiveAverage: "",
                    eqpLocInActiveUp: "",
                    eqpLocInActiveMiddle: "",
                    eqpLocInActiveDown: "",
                    eqpLocInActiveLeft: "",
                    eqpLocInActiveRight: "",
                    eqpLocInActiveAverage: ""
                },
                {
                    id: "101",
                    eqpLotLocation: "C2",
                    eqpLot: "",
                    eqpLocActiveUp: "",
                    eqpLocActiveMiddle: "",
                    eqpLocActiveDown: "",
                    eqpLocActiveLeft: "",
                    eqpLocActiveRight: "",
                    eqpLocActiveAverage: "",
                    eqpLocInActiveUp: "",
                    eqpLocInActiveMiddle: "",
                    eqpLocInActiveDown: "",
                    eqpLocInActiveLeft: "",
                    eqpLocInActiveRight: "",
                    eqpLocInActiveAverage: ""
                },
                {
                    id: "102",
                    eqpLotLocation: "C3",
                    eqpLot: "",
                    eqpLocActiveUp: "",
                    eqpLocActiveMiddle: "",
                    eqpLocActiveDown: "",
                    eqpLocActiveLeft: "",
                    eqpLocActiveRight: "",
                    eqpLocActiveAverage: "",
                    eqpLocInActiveUp: "",
                    eqpLocInActiveMiddle: "",
                    eqpLocInActiveDown: "",
                    eqpLocInActiveLeft: "",
                    eqpLocInActiveRight: "",
                    eqpLocInActiveAverage: ""
                },
                {
                    id: "103",
                    eqpLotLocation: "C4",
                    eqpLot: "",
                    eqpLocActiveUp: "",
                    eqpLocActiveMiddle: "",
                    eqpLocActiveDown: "",
                    eqpLocActiveLeft: "",
                    eqpLocActiveRight: "",
                    eqpLocActiveAverage: "",
                    eqpLocInActiveUp: "",
                    eqpLocInActiveMiddle: "",
                    eqpLocInActiveDown: "",
                    eqpLocInActiveLeft: "",
                    eqpLocInActiveRight: "",
                    eqpLocInActiveAverage: ""
                },
                {
                    id: "104",
                    eqpLotLocation: "C5",
                    eqpLot: "",
                    eqpLocActiveUp: "",
                    eqpLocActiveMiddle: "",
                    eqpLocActiveDown: "",
                    eqpLocActiveLeft: "",
                    eqpLocActiveRight: "",
                    eqpLocActiveAverage: "",
                    eqpLocInActiveUp: "",
                    eqpLocInActiveMiddle: "",
                    eqpLocInActiveDown: "",
                    eqpLocInActiveLeft: "",
                    eqpLocInActiveRight: "",
                    eqpLocInActiveAverage: ""
                },
                {
                    id: "105",
                    eqpLotLocation: "C6",
                    eqpLot: "",
                    eqpLocActiveUp: "",
                    eqpLocActiveMiddle: "",
                    eqpLocActiveDown: "",
                    eqpLocActiveLeft: "",
                    eqpLocActiveRight: "",
                    eqpLocActiveAverage: "",
                    eqpLocInActiveUp: "",
                    eqpLocInActiveMiddle: "",
                    eqpLocInActiveDown: "",
                    eqpLocInActiveLeft: "",
                    eqpLocInActiveRight: "",
                    eqpLocInActiveAverage: ""
                }
            ];
            var columns1 = [
                {
                    checkbox: true
                },
                {
                    field: 'index',
                    align: 'center',
                    title: "序号",
                    width: 40,
                    formatter: function (value, row, index) {
                        var columnIndex = $.common.sprintf("<input type='hidden' name='eqplocactiveindex' value='%s'>", $.table.serialNumber(index));
                        var columnId = $.common.sprintf("<input type='hidden' name='processrecord[%s].id' value='%s'>", index, row.id);
                        return columnIndex + $.table.serialNumber(index) + columnId;
                    }
                },
                {
                    field: 'eqpLotLocation',
                    align: 'center',
                    title: '位置',
                    width: 90,
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='processrecord[%s].eqpLotLocation' value='%s'>", index, value);
                        return html;
                    }
                },
                {
                    field: 'eqpLot',
                    align: 'center',
                    title: '卡号',
                    width: 250,
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='processrecord[%s].eqpLot' value='%s'>", index, value);
                        return html;
                    }
                },
                {
                    field: 'eqpLocActiveUp',
                    align: 'center',
                    title: '（温度）上',
                    width: 90,
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='processrecord[%s].eqpLocActiveUp' value='%s'>", index, value);
                        return html;
                    }
                },
                {
                    field: 'eqpLocActiveMiddle',
                    align: 'center',
                    title: '中',
                    width: 90,
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='processrecord[%s].eqpLocActiveMiddle' value='%s'>", index, value);
                        return html;
                    }
                },
                {
                    field: 'eqpLocActiveDown',
                    align: 'center',
                    title: '下',
                    width: 90,
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='processrecord[%s].eqpLocActiveDown' value='%s'>", index, value);
                        return html;
                    }
                },
                {
                    field: 'eqpLocActiveLeft',
                    align: 'center',
                    title: '左',
                    width: 90,
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='processrecord[%s].eqpLocActiveLeft' value='%s'>", index, value);
                        return html;
                    }
                },
                {
                    field: 'eqpLocActiveRight',
                    align: 'center',
                    title: '右',
                    width: 90,
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='processrecord[%s].eqpLocActiveRight' value='%s'>", index, value);
                        return html;
                    }
                },
                {
                    field: 'eqpLocActiveAverage',
                    align: 'center',
                    title: '平均值',
                    width: 90,
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='processrecord[%s].eqpLocActiveAverage' value='%s'>", index, value);
                        return html;
                    }
                },
                {
                    field: 'eqpLocInActiveUp',
                    align: 'center',
                    title: '（电阻）上',
                    width: 90,
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='processrecord[%s].eqpLocInActiveUp' value='%s'>", index, value);
                        return html;
                    }
                },
                {
                    field: 'eqpLocInActiveMiddle',
                    align: 'center',
                    title: '中',
                    width: 90,
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='processrecord[%s].eqpLocInActiveMiddle' value='%s'>", index, value);
                        return html;
                    }
                },
                {
                    field: 'eqpLocInActiveDown',
                    align: 'center',
                    title: '下',
                    width: 90,
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='processrecord[%s].eqpLocInActiveDown' value='%s'>", index, value);
                        return html;
                    }
                },
                {
                    field: 'eqpLocInActiveLeft',
                    align: 'center',
                    title: '左',
                    width: 90,
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='processrecord[%s].eqpLocInActiveLeft' value='%s'>", index, value);
                        return html;
                    }
                },
                {
                    field: 'eqpLocInActiveRight',
                    align: 'center',
                    title: '右',
                    width: 90,
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='processrecord[%s].eqpLocInActiveRight' value='%s'>", index, value);
                        return html;
                    }
                },
                {
                    field: 'eqpLocInActiveAverage',
                    align: 'center',
                    title: '平均值',
                    width: 90,
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='processrecord[%s].eqpLocInActiveAverage' value='%s'>", index, value);
                        return html;
                    }
                },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function(value, row, index) {
                        var value = $.common.isNotEmpty(row.index) ? row.index : $.table.serialNumber(index);
                        return '<a class="btn btn-danger btn-xs" href="javascript:void(0)" onclick="sub.delRowByIndex(\'' + value + '\')"><i class="fa fa-remove"></i>删除</a>';
                    }
                }
            ];
            var options1 = {
                id: "bootstrap-table1",
                data: data1,
                pagination: false,
                showSearch: false,
                showRefresh: false,
                showToggle: false,
                showColumns: false,
                sidePagination: "client",
                columns: columns1
            };
            $.table.init(options1);
        });

        $(function() {
            var data2 = [
                {
                    id: "200",
                    particleNumLocation: "",
                    particleNumBefore: "",
                    particleNumBack: "",
                    particleNumDvalue: ""
                },
                {
                    id: "201",
                    particleNumLocation: "",
                    particleNumBefore: "",
                    particleNumBack: "",
                    particleNumDvalue: ""
                },
                {
                    id: "202",
                    particleNumLocation: "",
                    particleNumBefore: "",
                    particleNumBack: "",
                    particleNumDvalue: ""
                },
                {
                    id: "203",
                    particleNumLocation: "",
                    particleNumBefore: "",
                    particleNumBack: "",
                    particleNumDvalue: ""
                },
                {
                    id: "204",
                    particleNumLocation: "",
                    particleNumBefore: "",
                    particleNumBack: "",
                    particleNumDvalue: ""
                },
                {
                    id: "205",
                    particleNumLocation: "",
                    particleNumBefore: "",
                    particleNumBack: "",
                    particleNumDvalue: ""
                }
            ];
            var columns2 = [
                {
                    checkbox: true
                },
                {
                    field: 'index',
                    align: 'center',
                    title: "序号",
                    formatter: function (value, row, index) {
                        var columnIndex = $.common.sprintf("<input type='hidden' name='locparamindex' value='%s'>", $.table.serialNumber(index));
                        var columnId = $.common.sprintf("<input type='hidden' name='locparam[%s].id' value='%s'>", index, row.id);
                        return columnIndex + $.table.serialNumber(index) + columnId;
                    }
                },
                {
                    field: 'particleNumLocation',
                    align: 'center',
                    title: '颗粒数-位置',
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='locparam[%s].particleNumLocation' value='%s'>", index, value);
                        return html;
                    }
                },
                {
                    field: 'particleNumBefore',
                    align: 'center',
                    title: '前值',
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='locparam[%s].particleNumBefore' value='%s'>", index, value);
                        return html;
                    }
                },
                {
                    field: 'particleNumBack',
                    align: 'center',
                    title: '后值',
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='locparam[%s].particleNumBack' value='%s'>", index, value);
                        return html;
                    }
                },
                {
                    field: 'particleNumDvalue',
                    align: 'center',
                    title: '差值',
                    formatter: function(value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='locparam[%s].particleNumDvalue' value='%s'>", index, value);
                        return html;
                    }
                },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function(value, row, index) {
                        var value = $.common.isNotEmpty(row.index) ? row.index : $.table.serialNumber(index);
                        return '<a class="btn btn-danger btn-xs" href="javascript:void(0)" onclick="sub.delRowByIndex(\'' + value + '\')"><i class="fa fa-remove"></i>删除</a>';
                    }
                }
            ];
            var options2 = {
                id: "bootstrap-table2",
                data: data2,
                pagination: false,
                showSearch: false,
                showRefresh: false,
                showToggle: false,
                showColumns: false,
                sidePagination: "client",
                columns: columns2
            };
            $.table.init(options2);
        });

        $("#form-add").validate({
            focusCleanup: true
        });

        function submitHandler(index, layero){
            if ($.validate.form()) {
                var data = $("#form-add").serializeArray();
                $.operate.saveTab(prefix + "/add", data);
            }
        }

        function addRow1() {
            var count = $("#bootstrap-table1").bootstrapTable('getData').length;
            var row = {
                index: $.table.serialNumber(count),
                eqpLotLocation: "",
                eqpLot: "",
                eqpLocActiveUp: "",
                eqpLocActiveMiddle: "",
                eqpLocActiveDown: "",
                eqpLocActiveLeft: "",
                eqpLocActiveRight: "",
                eqpLocActiveAverage: "",
                eqpLocInActiveUp: "",
                eqpLocInActiveMiddle: "",
                eqpLocInActiveDown: "",
                eqpLocInActiveLeft: "",
                eqpLocInActiveRight: "",
                eqpLocInActiveAverage: "",
            }
            sub.addRow(row, 'bootstrap-table1');
        }

        function addRow2() {
            var count = $("#bootstrap-table2").bootstrapTable('getData').length;
            var row = {
                index: $.table.serialNumber(count),
                particleNumLocation: "",
                particleNumBefore: "",
                particleNumBack: "",
                particleNumDvalue: ""
            }
            sub.addRow(row, 'bootstrap-table2');
        }

        $("input[name='maintainDate']").datetimepicker({
            format: "yyyy-mm-dd",
            minView: "month",
            autoclose: true
        });

        $("#bootstrap-table").on("post-body.bs.table", function (e, args) {
            $("input[name$='date']").datetimepicker({
                format: "yyyy-mm-dd",
                minView: "month",
                autoclose: true,
                pickerPosition:'top-right'
            });
        });
    </script>
</body>
</html>